
import React , {useState,useRef,useEffect} from 'react'
import "./index.scss"
import thisimg from "../../assets/images/404.png"
import { Progress } from 'antd'

export default function NotFound(props:any) {
    const [span, setspan] = useState<Array<any>>([])
    const bgstar:any = useRef()
    let [percent,setPercent] = useState<number>(0)
    let timer:any = null 
    const {history} = props;
    useEffect(()=>{
        getSpan()
        initTimer()
        return()=>{
            // 销毁
            clearInterval(timer)
            timer = null    
        }
    },[])
    const gotologin = ():void=>{
        history.push('/login')
    }

    const initTimer = ():void =>{
        timer = setInterval(()=>{
            if(percent<100){
                setPercent(++percent)
                console.log(percent);
                
            }else{
                clearInterval(timer)
                timer = null 
                history.push("/login"); // login 
            }
        },40)
    }
    const getSpan = () :void=>{
        var width:number = bgstar.current.clientWidth; 
        var height:number = bgstar.current.clientHeight     
        // console.log(width,height)
        // console.log(bgstar);
        for(var i=0;i<350;i++){
            // 随机位置
            var x =  Math.floor(Math.random() * width)
            var y =  Math.floor(Math.random() * height)

            // 随机频率
            var rate = Math.random() * 2.5;

            // 随机大小
            var scaler=Math.random() * 1.5;

            // 随机颜色
            var r = Math.floor(Math.random() * 255)
            var g = Math.floor(Math.random() * 255)
            var b = Math.floor(Math.random() * 255)
            var a = Math.random() * 1;

            span.push({
                x:x+'px',
                y:y+'px',
                rate,
                scaler,
                rgba:`rgba(${r},${g},${b},${a})`
            })
            
        }

        setspan([...span])
    }   
    return (
        <div className="errorpage" id="bgstar"  ref={bgstar} >
            <div className="dao" onClick={gotologin}>
                <Progress type="circle" percent={percent} width={60} />
            </div>
            <img src={thisimg}  alt="" className="myimg" />
            {
                span.map((l,i)=>{
                    return (
                        <span key={i}
                            className="spandot"
                            style={{
                                top:l.y,
                                left:l.x,
                                animationDelay:l.rate+"s",
                                transform:`scale(${l.scaler})`,
                                background:l.rgba
                            }}
                        >
                        </span>
                    )
                })
            }
        </div>
    )
}
